<template>
    <div class="container home-page">
        <img class="img-bg" src="../../assets/images/home/bg.jpg" />
        <img class="img-flow" src="../../assets/images/home/flow.gif" />
        <img class="img-role" src="../../assets/images/home/role.png" />
        <img class="img-logo" src="../../assets/images/home/logo.png" />
        <img class="bn-start" @click="onStartHandler" src="../../assets/images/home/btnStart.png" />
    </div>
</template>
<script>
export default {

    methods: {
        onStartHandler() {
            this.$router.push("/question")
        }
    }
}
</script>

<style lang="less" scoped>
.home-page {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;

    .img {
        display: block;
    }

    .img-bg {
        height: 100%;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .img-flow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .img-role {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .img-logo {
        width: 932px;
        height: 250px;
        position: absolute;
        bottom: 440px;
        left: 74px;
    }

    .bn-start {
        position: absolute;
        bottom: 100px;
        left: 258px;
        width: 564px;
        height: 224px;
    }
}
</style>

